import React from 'react';
import PropTypes from 'prop-types';
import { Grid } from '@material-ui/core';
import User from '../Users/User'

const Users = props => {
  const { data, voting, setVoting, className, ...rest } = props;

  return (
    <div className={className} {...rest}>
      <Grid container spacing={2}>
        {data.map((item, index) => (
          <Grid item xs={12} sm={12} md={3} key={index}>
            <User data={item} voting={voting} setVoting={setVoting}></User>
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

Users.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
  /**
   * data to be rendered
   */
  data: PropTypes.array.isRequired,
};

export default Users;
